<template>
  <div class="app-container">
    <!-- 查询部分 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="shoppingCarEnums">
        <el-select
          v-model="queryParams.shoppingCarEnums"
          placeholder="合同类型"
          clearable
        >
          <el-option
            v-for="item in contractTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 合同经手人员 -->
      <el-form-item prop="handledBy">
        <el-input
          v-model="queryParams.handledBy"
          placeholder="合同经手人员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <!-- 单选框，审核状态选择 -->
      <el-radio-group
        v-model="queryParams.contractStatus"
        size="mini"
        @input="checkedStatus"
      >
        <el-radio-button label="">所有</el-radio-button>
        <el-radio-button :label="1">未审核</el-radio-button>
      </el-radio-group>
      <!-- <div class="addBut">
        <el-button size="mini" type="primary">添加</el-button>
      </div> -->
      <el-table border :data="contractList">
        <el-table-column label="合同编号" align="center" prop="id" />
        <el-table-column label="订单编号" align="center" prop="orderItemSn" />
        <el-table-column label="合同日期" align="center" prop="contractDate" />
        <el-table-column label="合同类型" align="center" prop="shoppingCarEnums">
          <template slot-scope="scope">
            <span>{{ scope.row.shoppingCarEnums | ctCostType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同金额" align="center" prop="updatePrice" />
        <el-table-column label="合同经手人员" align="center" prop="handledBy" />
        <el-table-column label="合同状态" align="center" prop="contractStatus">
          <template slot-scope="scope">
            <span>{{ scope.row.contractStatus | ctContractStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.contractStatus == 0"
              @click="toExamine(scope.row, 1)"
            >
              通过
            </el-button>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.contractStatus == 0"
              @click="toExamine(scope.row, 2)"
            >
              拒绝
            </el-button>
            <el-button size="mini" type="text" @click="toDetials(scope.row)">
              详情
            </el-button>
            <!-- <el-button size="mini" type="text" @click="delContract(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize"
      @pagination="getList"
    />

    <!-- 合同审核详情对话框 -->
    <el-dialog
      title="详情"
      :visible.sync="addContractIsShow"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <p class="title">合同双方信息</p>
        <el-form-item label="订单编号" prop="id">
          <el-input v-model="form.orderItemSn" />
        </el-form-item>
        <el-form-item label="地址" prop="userAddress">
          <el-input v-model="form.userAddress" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="userName">
          <el-input v-model="form.userName" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="userContactPhone">
          <el-input v-model="form.userContactPhone" />
        </el-form-item>
        <el-form-item label="开户银行" prop="userBankOfDeposit">
          <el-input v-model="form.userBankOfDeposit" />
        </el-form-item>
        <el-form-item label="银行账号" prop="userAccountNumber">
          <el-input v-model="form.userAccountNumber" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="userTaxpayerNumber">
          <el-input v-model="form.userTaxpayerNumber" />
        </el-form-item>
        <p class="title">四川智慧华云大数据有限公司 </p>
        <el-form-item label="地址" prop="companyAddress">
          <el-input v-model="form.companyAddress" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="companyName">
          <el-input v-model="form.companyName" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="companyContactPhone">
          <el-input v-model="form.companyContactPhone" />
        </el-form-item>
        <el-form-item label="收款账号" prop="companyAccountNumber">
          <el-input v-model="form.companyAccountNumber" />
        </el-form-item>
        <p class="title">订单信息</p>
        <el-table :data="form.orderItems">
          <el-table-column label="关联订单编号" align="center" prop="sn" />
          <el-table-column label="购物车类型" align="center" prop="shoppingCarEnums">
            <template slot-scope="scope">
              <span>{{ scope.row.shoppingCarEnums | ctCostType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单摘要" align="center" prop="orderAbstract" />
          <el-table-column label="成交金额" align="center" prop="updatePrice" />
        </el-table>
        <!-- <el-form-item label="开票日期" prop="name">
          <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" />
        </el-form-item>
        <el-form-item label="开票金额" prop="name">
          <el-input placeholder="请输入金额" v-model="form.name">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="关联客户" prop="name">
          <el-select v-model="form.name" placeholder="请选择客户">
            <el-option v-for="item in customOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="票据类型" prop="name">
          <el-select v-model="form.name" placeholder="请选择类型">
            <el-option v-for="item in billTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="发票号码" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="经手人员" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="备注信息" prop="name">
          <el-input v-model="form.name" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- <el-button type="primary" @click="submitForm">保存</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  contractAuditsList,
  contractPass,
  contractRefuse,
  contractDetial,
} from "@/api/auditsManagement/contractAudits";
export default {
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 费用中心表格数据
      contractList: [],
      // 查询参数
      queryParams: {
        id: "", // 订单编号查询
        shoppingCarEnums: "", //合同类型
        handledBy: "", //经手人员
        contractStatus: "", // 审核状态
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      //合同类型下拉框数据
      contractTypeOptions: [
        { value: "CLOUD_SERVER", label: "云服务器" },
        { value: "CLOUD_MARKET", label: "云市场" },
        { value: "GOV_CLOUD", label: "政务云" },
        { value: "CLOUD_SERVER_RENEW", label: "云服务器续费" },
        { value: "CLOUD_SERVER_CHANGE", label: "云服务器变更" },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //是否打开添加合同审核对话框
      addContractIsShow: false,
      //关联客户下拉框数据
      customOptions: [
        { value: "1", label: "赵小明" },
        { value: "2", label: "赵小刚" },
      ],
      //票据类型下拉框数据
      billTypeOptions: [
        { value: "1", label: "增值税普通发票" },
        { value: "2", label: "增值税专用发票" },
      ],
      name: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**打开查看详情对话框 */
    toDetials(row) {
      this.addContractIsShow = true;
      this.getContractDetial(row.id);
    },
    /**查询合同详情 */
    getContractDetial(id) {
      contractDetial(id).then((res) => {
        if (200 == res.code) {
          this.form = res.data;
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    /**合同审核,type:1.通过，2.拒绝 */
    toExamine(obj, type) {
      if (1 === type) {
        this.$confirm(`确定要通过审核吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            contractPass(obj.orderItemId).then((res) => {
              if (200 === res.code) {
                this.getList();
                this.$message.success(`通过成功`);
              }
            });
          })
          .catch(() => {});
      } else {
        this.$confirm(`确定要拒绝审核吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            contractRefuse(obj.orderItemId).then((res) => {
              if (200 === res.code) {
                this.getList();
                this.$message.success(`拒绝成功`);
              }
            });
          })
          .catch(() => {});
      }
    },
    /**切换审核状态 */
    checkedStatus(e) {
      this.queryParams.contractStatus = e;
      this.getList();
    },
    /**删除合同 */
    delContract(row) {
      this.$confirm(`确定要删除${row}合同吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // const data = {};
          // openCloudServer(data).then((res) => {
          //   if (res.code === 200) {
          //     this.$message.success("删除成功!");
          //     this.getList();
          //   }
          // });
        })
        .catch(() => {});
    },
    /** 查询合同审核列表 */
    getList() {
      contractAuditsList(this.queryParams).then((response) => {
        this.contractList = response.rows;
        this.total = response.total;
      });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.roleId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.roleId != null) {
            // updateRole(this.form).then(response => {
            //   this.$modal.msgSuccess("修改成功");
            //   // this.addContractIsShow = false;
            //   this.getList();
            // });
          } else {
            // addRole(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   // this.addContractIsShow = false;
            //   this.getList();
            // });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.addContractIsShow = false;
      this.reset();
    },
  },
};
</script>

<style lang="scss" scoped>
.addBut {
  margin: 10px 0;
}

.title {
  height: 30px;
  font-weight: 700;
  font-size: 20px;
}
</style>
